<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" sizes="32x32">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>EasyOA-邮箱验证</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css" th:href="@{/css/typography.css}">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css" th:href="@{/css/responsive.css}">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
    <div class="container p-0">
        <div class="row no-gutters">
            <div class="col-sm-12 align-self-center">
                <div class="sign-in-from bg-white">
                    <h1 class="mb-0">验证您的邮箱</h1>
                    <p>请登录您的邮箱并输入收到的验证码</p>
                    <div class="alert alert-danger" role="alert" style="display: none">
                        <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                    </div>
                    <div class="mt-4">
                        <div class="form-group">
                            <label for="checkCode">验证码</label>
                            <input type="text" class="form-control mb-0" id="checkCode" name="checkCode"
                                   placeholder="请输入您收到的验证码" required="required" pattern="^\d{6,8}$" title="请输入6-8位验证码">
                        </div>
                        <div class="d-inline-block w-100">
                            <button type="button" class="btn btn-primary float-right" onclick="activation()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sign in END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Appear JavaScript -->
<script src="js/jquery.appear.js" th:src="@{/js/jquery.appear.js}"></script>
<!-- Countdown JavaScript -->
<script src="js/countdown.min.js" th:src="@{/js/countdown.min.js}"></script>
<!-- Counterup JavaScript -->
<script src="js/waypoints.min.js" th:src="@{/js/waypoints.min.js}"></script>
<script src="js/jquery.counterup.min.js" th:src="@{/js/jquery.counterup.min.js}"></script>
<!-- Wow JavaScript -->
<script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>
<!-- Apexcharts JavaScript -->
<script src="js/apexcharts.js" th:src="@{/js/apexcharts.js}"></script>
<!-- Select2 JavaScript -->
<script src="js/select2.min.js" th:src="@{/js/select2.min.js}"></script>
<!-- Owl Carousel JavaScript -->
<script src="js/owl.carousel.min.js" th:src="@{/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup JavaScript -->
<script src="js/jquery.magnific-popup.min.js" th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="js/smooth-scrollbar.js" th:src="@{/js/smooth-scrollbar.js}"></script>
<!-- Chart Custom JavaScript -->
<script src="js/chart-custom.js" th:src="@{/js/chart-custom.js}"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js" th:src="@{/js/custom.js}"></script>
<script type="text/javascript">
    // 定义提示框显示定时器
    let interval;
    // 定义访问限制所用变量
    var restrictions = 0;

    // 验证码提交验证方法
    function activation() {
        if (restrictions === 0) {

            restrictions = 1

            // 对后端进行的请求，三秒一次

            setTimeout(function () {
                restrictions = 0
            }, 3000) //限制为3s

        } else {
            alert("请求过于频繁");
            return false;
        }

        // ajax验证激活码---start
        $.ajax({
            type: "POST",
            url: "/user/activation",
            data: {checkCode: $("input[name='checkCode']").val()},
            dataType: "text",
            async: false,
            success: function (data) {
                if (data === "激活成功") {
                    location.href = "/index";
                }
                showCheckResult(data);
            },
            error: function () {
                showCheckResult("激活过程出现异常");
            }
        });
        // ajax验证激活码---end
        return false;
    }

    // 显示验证结果
    function showCheckResult(data) {
        let alertDanger = $("div.alert-danger div.iq-alert-text");
        alertDanger.parent().slideDown("slow");
        alertDanger.text(data);
        interval = setInterval(hideCheckResult, 3000);
    }

    // 三秒后隐藏验证结果
    function hideCheckResult() {
        $("div.alert-danger").slideUp("slow");
        clearInterval(interval);
    }
</script>
</body>
</html>